import React from 'react';
import Home from './views/home' // 首页
import Channel from './views/channel' // 频道
import Dynamic from './views/dynamic' // 动态
import Kits from './views/kits' // 手办
import User from './views/user' // 我的
// react路由
import {
  Switch,
  Route,
  NavLink,
  Redirect
} from "react-router-dom";
function App() {
  return (
    <div className="container">
      {/* 遵循react路由规则 */}
       <Switch>
        <Route path="/home" component= {Home}/>
        <Route path="/channel" component= {Channel}/>
        <Route path="/dynamic" component= {Dynamic}/>
        <Route path="/user" component= {User}/>
        <Route path="/kits" component= {Kits}/>
        <Redirect path="/" exact to="/home" />
      </Switch>
      <footer className="footer">
        <ul>
          <NavLink to="/home">
          <span className="iconfont icon-1"></span>
          <p>首页</p>
          </NavLink>
          <NavLink to="/channel">
          <span className="iconfont icon-zipindao"></span>
          <p>频道</p>
          </NavLink>
          <NavLink to="/dynamic">
          <span className="iconfont icon-iconfontdongtai"></span>
          <p>动态</p>
          </NavLink>
          <NavLink to="/kits">
          <span className="iconfont icon-huiyuan"></span>
          <p>手办</p>
          </NavLink>
          <NavLink to="/user">
          <span className="iconfont icon-dianshi"></span>
          <p>我的</p>
          </NavLink>        
        </ul>
      </footer>
    </div>
  );
}

export default App;
